import Qt 4.7

Rectangle {
    id: meter;
    property int digits: 9

    property int digit_w: 24
    property int digit_h: 40
    property int value: 0;
    width: digit_w*digits;
    height:digit_h+2;
    function getDigit(val, idx) {
        if (idx>0) return getDigit(Math.floor(val/10), idx-1);
        return val%10;
    }
    color:"#888"

        Repeater {

            model: digits;
            Item{
                anchors.fill: parent;
                anchors.margins: 1;
                clip:true;
                Column {
                    x: meter.width-index*digit_w-digit_w;
                    id: digit_num;
                    y: -getDigit(value, index)*digit_h;
                    Behavior on y {NumberAnimation { duration: 200;}}

                    Repeater {
                        id: digit_val;
                        model:10;
                        Text {
                            text:index%10;
                            height:digit_h;
                            width:digit_w;
                            font.pixelSize:18;
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            style: Text.Outline;
                            styleColor: "#aaa"
                            color: "#555"
                            //color: "#adf"

                        }
                    }

                }
                Rectangle{
                    width:1;height: digit_h;
                    y:1;
                    x: meter.width-index*digit_w-digit_w;
                    color:meter.border.color;
                    gradient: Gradient {
                            GradientStop { position: 0.0; color: "#999" }
                            GradientStop { position: 0.5; color: "#888" }
                            GradientStop { position: 1.0; color: "#999" }
                        }
                    visible: index!=digits-1;
                }
            }
        }

    MouseArea {
        anchors.fill: parent;
        onPressed: {
            meter.value++;
        }
    }

}
